<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr">
<head>
<title>Experiments | jQuery Nested Accordion - demo 1</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Language" content="en" />
<meta name="language" content="en" />
<meta name="robots" content="index, follow" />
<meta name="author" content="Adriana Palazova - www.adipalaz.com" />
<link href="css/accordion.css" rel="stylesheet" type="text/css">

<!--[if lte IE 6]>
<style type='text/css'>
  * html #main, * html #container, #side a, a.trigger, .accordion .inner {height:1%}
  #lenta{height:52px}
</style>
<script type="text/javascript">
   try { document.execCommand( "BackgroundImageCache", false, true); } catch(e) {};
</script>
<![endif]-->
<!--[if lte IE 7]>
<style type="text/css">
  .accordion .inner {position:static; overflow:visible}
</style>
<![endif]-->
<!--[if !lt IE 6]><!-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.nestedAccordion.js"></script>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.jstree.js"></script>
<script type="text/javascript">
<!--//--><![CDATA[//><!--
$("html").addClass("js");
$.fn.accordion.defaults.container = false; 
$(function() {
  $("#acc3").accordion({initShow : "#current"});
  
  $("html").removeClass("js");
});
//--><!]]>
</script>
<!--<![endif]-->


</head>
<body id="nested-accordion-demo" >
    <div id="wrapper"> 
            <div id="left-side">
                <ul id="acc3" class="accordion">
                    <li><a href="#item1">Item 1</a>
                        <ul>
                            <li><a href="#Sub11">Sub 1.1</a>
                                <ul>
                                    <li><a href="#Sub111">Sub 1.1.1</a>
                                        <ul>
                                            <li><a href="#link1">Link 1</a></li>
                                            <li><a href="#link2">Link 2</a></li>
                                        </ul>
                                    </li>
                                    <li><a href="#Sub112">Sub 1.1.2</a>
                                        <ul>
                                            <li><a href="#link3">Link 3</a></li>
                                            <li><a href="#link4">Link 4</a></li>
                                        </ul>
                                    </li>
                                </ul>
                            </li>
                            <li><a href="#Sub12">Sub 1.2</a>
                                <ul>
                                    <li><a href="#link5">Link 5</a></li>
                                    <li><a href="#link6">Link 6</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Item 2
                        <ul>
                            <li>Sub 2.1
                                <ul>
                                    <li><a href="#link11">Link 11</a></li>
                                    <li><a href="#link12">Link 12</a></li>
                                </ul>
                            </li>
                            <li>Sub 2.2
                                <ul>
                                    <li><a href="#link13">Link 13</a></li>
                                </ul>

                            </li>
                            <li>Sub 2.3
                                <ul>
                                    <li><a href="#link14">Link 14</a></li>
                                    <li><a href="#link15">Link 15</a></li>
                                    <li><a href="#link16">Link 16</a></li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                    <li>Item 3
                        <ul>
                            <li><a href="#link17">Link 17</a></li>
                            <li><a href="#link18">Link 18</a></li>
                        </ul>
                    </li>
                    <li><a href="#item4">Item 4</a></li>
                </ul> 
            </div>
    </div>
	
	
	<div id="description">
<p>Here is how you create an instance, bind an event and then get the instance.</p>
<div id="demo1" class="demo" style="height:100px;">
	<ul>
		<li id="phtml_1">
			<a href="#">Root node 1</a>
			<ul>
				<li id="phtml_2">
					<a href="#">Child node 1</a>
				</li>
				<li id="phtml_3">
					<a href="#">Child node 2</a>
				</li>
			</ul>
		</li>
		<li id="phtml_4">
			<a href="#">Root node 2</a>
		</li>
	</ul>
</div>
<script type="text/javascript" class="source below">
$(function () {
	// TO CREATE AN INSTANCE
	// select the tree container using jQuery
	$("#demo1")
		// call `.jstree` with the options object
		.jstree({
			// the `plugins` array allows you to configure the active plugins on this instance
			"plugins" : ["themes","html_data","ui","crrm","hotkeys"],
			// each plugin you have included can have its own config object
			"core" : { "initially_open" : [ "phtml_1" ] }
			// it makes sense to configure a plugin only if overriding the defaults
		})
		// EVENTS
		// each instance triggers its own events - to process those listen on the container
		// all events are in the `.jstree` namespace
		// so listen for `function_name`.`jstree` - you can function names from the docs
		.bind("loaded.jstree", function (event, data) {
			// you get two params - event & data - check the core docs for a detailed description
		});
	// INSTANCES
	// 1) you can call most functions just by selecting the container and calling `.jstree("func",`
	setTimeout(function () { $("#demo1").jstree("set_focus"); }, 500);
	// with the methods below you can call even private functions (prefixed with `_`)
	// 2) you can get the focused instance using `$.jstree._focused()`. 
	setTimeout(function () { $.jstree._focused().select_node("#phtml_1"); }, 1000);
	// 3) you can use $.jstree._reference - just pass the container, a node inside it, or a selector
	setTimeout(function () { $.jstree._reference("#phtml_1").close_node("#phtml_1"); }, 1500);
	// 4) when you are working with an event you can use a shortcut
	$("#demo1").bind("open_node.jstree", function (e, data) {
		// data.inst is the instance which triggered this event
		data.inst.select_node("#phtml_2", true);
	});
	setTimeout(function () { $.jstree._reference("#phtml_1").open_node("#phtml_1"); }, 2500);
});
</script>
</div>

</html>